<template>
  <div class="ie-table">
    <el-table
      :data="tableData"
      stripe
      border
      :header-cell-style="headerCellStyle"
      highlight-current-row
      :cell-style="cellStyle"
      size="medium"
      row-key="id"
      @selection-change="$emit('selectChang',$event)"
      @current-change="$emit('singleTable',$event)"
      :tree-props="{children: 'children'}"
      max-height="450"
    >
      <!-- 多选框 -->
      <el-table-column v-if="showSelect" type="selection" align="center" fixed></el-table-column>
      <!-- 序号 -->
      <el-table-column
        v-if="showIndex"
        type="index"
        :width="indexWidth"
        :label="indexLabel"
        align="center"
        :index="indexMethod"
        fixed
      ></el-table-column>
      <!-- 展开 -->
      <el-table-column v-if="showExpand" type="expand">
        <template slot-scope="{row}">
          <el-table v-if="row[childrenData].length>0" :data="row[childrenData]" stripe border>
            <el-table-column
              v-for="({label,type,value,fltName,fltval},index) in childrenHeader"
              :key="index"
              :label="label"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="{row}">
                <!-- 过滤纯文本 -->
                <div v-if="type=='flt'">
                  <div>{{row[value] | all(fltName,fltval)}}</div>
                </div>
                <div v-else>
                  <div>{{row[value]}}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <!-- 主体 -->
      <el-table-column
        v-for="({label,type,value,width,fltName,fltval,operations,fixed,ck},index) in headerData"
        :key="index"
        :label="label"
        align="center"
        :width="width||indexWidth"
        :fixed="fixed||((index==0||type=='btnText')||(label=='操作'?'right':false))"
        show-overflow-tooltip
      >
        <template slot-scope="{row}">
          <!-- 按钮文本 -->
          <el-button v-if="type=='btnText'" type="text" @click="$emit('btnText',row)">{{row[value]}}</el-button>
          <!--  按钮文本-->
          <el-button v-else-if="type=='txt'" type="text" @click="$emit(ck,row)">{{row[value]}}</el-button>
          <!-- 单选按钮 -->
          <el-radio v-else-if="type=='radio'" :value="radios" :label="row[value]">&nbsp;</el-radio>
          <!-- 按钮操作 -->
          <div v-else-if="type=='btn'">
            <el-button
              v-for="(b,i) in (operations||row[value])"
              :key="i"
              :type="b.whatType"
              size="mini"
              @click="$emit(b.ck,row)"
              :disabled="b.disabled"
              v-show="b.show!=undefined?b.show:true"
            >{{ b.label }}</el-button>
          </div>
          <!-- 过滤纯文本 -->
          <div v-else-if="type=='flt'">
            <div>{{row[value] | all(fltName,fltval)}}</div>
          </div>
          <div v-else>
            <div>{{row[value]}}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="showPage"
      background
      layout="prev, pager, next"
      :current-page.sync="paginator.currentPage"
      :page-size="paginator.pageSize"
      :total="paginator.totalCounts"
      @current-change="$emit('currentChange', $event)"
    ></el-pagination>
  </div>
</template>


<script>
export default {
  methods: {
    indexMethod(index) {
      let a = index + 1 + (this.paginator.currentPage - 1) * 10;
      return a;
    }
  },
  computed: {
    headerCellStyle() {
      return {
        color: "#101010",
        backgroundColor: "#f1f2f2"
      };
    },
    cellStyle() {
      return {
        color: "#101010"
      };
    }
  },
  props: {
    childrenHeader: {
      type: Array,
      default() {
        return [];
      }
    },
    childrenData: {
      type: String,
      default: "children"
    },
    showExpand: {
      type: Boolean,
      default: false
    },
    showPage: {
      type: Boolean,
      default: true
    },
    radios: {
      type: Number,
      default: 0
    },
    headerData: {
      type: Array,
      default() {
        return [];
      }
    },
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    indexWidth: {
      type: String,
      default: "auto"
    },
    indexLabel: {
      type: String,
      default: "序号"
    },
    showIndex: {
      type: Boolean,
      default: false
    },
    showSelect: {
      type: Boolean,
      default: false
    },
    paginator: {
      type: Object,
      default() {
        return { currentPage: 1, pageSize: 10, totalCounts: 10 };
      }
    }
  }
};
</script>

<style>
.el-table .el-radio__label {
  display: none;
}
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>